<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.1.3 (458534)"/><meta name="author" content="流星"/><meta name="created" content="2020-11-09 12:53:55 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-11-09 13:30:29 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>TypeScript项目</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">编译上下文</h2>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">编译上下文用来文件分组，告诉TypeScript哪些文件是有效，哪些文件是无效的。也包含了有哪些编译选项正在使用</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">编译选项</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">你可以通过 compilerOptions 来定制你的编译选项：</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"compilerOptions"</span>: {

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* 基本选项 */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"target"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"es5"</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"commonjs"</span>,                  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"lib"</span>: [],                             <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定要包含在编译中的库文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"allowJs"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 允许编译 javascript 文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkJs"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 报告 javascript 文件中的错误</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"jsx"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"preserve"</span>,                     <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"declaration"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                   <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 生成相应的 '.d.ts' 文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sourceMap"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                     <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 生成相应的 '.map' 文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"outFile"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 将输出文件合并为一个文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"outDir"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定输出目录</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"rootDir"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 用来控制输出目录结构 --outDir.</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"removeComments"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 删除编译后的所有的注释</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noEmit"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 不生成输出文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"importHelpers"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                 <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 从 tslib 导入辅助工具函数</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"isolatedModules"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,               <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 将每个文件作为单独的模块 （与 'ts.transpileModule' 类似）.</span>

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* 严格的类型检查选项 */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"strict"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 启用所有严格类型检查选项</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noImplicitAny"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                 <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 在表达式和声明上有隐含的 any类型时报错</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"strictNullChecks"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,              <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 启用严格的 null 检查</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noImplicitThis"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 当 this 表达式值为 any 类型的时候，生成一个错误</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"alwaysStrict"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 以严格模式检查每个模块，并在每个文件里加入 'use strict'</span>

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* 额外的检查 */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noUnusedLocals"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 有未使用的变量时，抛出错误</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noUnusedParameters"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 有未使用的参数时，抛出错误</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noImplicitReturns"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,             <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 并不是所有函数里的代码都有返回值时，抛出错误</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"noFallthroughCasesInSwitch"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）</span>

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* 模块解析选项 */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"moduleResolution"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"node"</span>,            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"baseUrl"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 用于解析非相对模块名称的基目录</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"paths"</span>: {},                           <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 模块名到基于 baseUrl 的路径映射的列表</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"rootDirs"</span>: [],                        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 根文件夹列表，其组合内容表示项目运行时的结构内容</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"typeRoots"</span>: [],                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 包含类型声明的文件列表</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"types"</span>: [],                           <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 需要包含的类型声明文件名列表</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"allowSyntheticDefaultImports"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 允许从没有设置默认导出的模块中默认导入。</span>

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* Source Map Options */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sourceRoot"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定调试器应该找到 TypeScript 文件而不是源文件的位置</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"mapRoot"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./"</span>,                       <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 指定调试器应该找到映射文件而不是生成文件的位置</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"inlineSourceMap"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,               <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"inlineSources"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,                 <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性</span>

    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* 其他选项 */</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"experimentalDecorators"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 启用装饰器</span>
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"emitDecoratorMetadata"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>          <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 为装饰器提供元数据的支持</span>
  }
}
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">TypeScript 编译</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在使用 tsconfig.json 时从命令行手动运行 TypeScript 编译器，你可以通过以下方式：<br/>
运行 tsc，它会在当前目录或者是父级目录寻找 tsconfig.json 文件。<br/>
运行 tsc -p ./path-to-project-directory 。当然，这个路径可以是绝对路径，也可以是相对于当前目录的相对路径。<br/>
你甚至可以使用 tsc -w 来启用 TypeScript 编译器的观测模式，在检测到文件改动之后，它将重新编译。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">指定文件</h4>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//显式指定需要编译的文件：</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"files"</span>: [
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./some/file.ts"</span>
  ]
}


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//可以使用 include 和 exclude 选项来指定需要包含的文件和排除的文件</span>
{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"include"</span>: [
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./folder"</span>
  ],
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"exclude"</span>: [
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./folder/**/*.spec.ts"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./folder/someSubFolder"</span>
  ]
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//注意使用 globs：**/* （一个示例用法：some/folder/**/*）意味着匹配所有的文件夹和所有文件（扩展名为 .ts/.tsx，当开启了 allowJs: true 选项时，扩展名可以是 .js/.jsx）。</span>
</code></pre>
<h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">声明空间</h2>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在 TypeScript 里存在两种声明空间：类型声明空间与变量声明空间</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">类型声明空间</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">类型声明空间包含用来当做类型注解的内容，例如下面的类型声明：</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">class</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">Foo</span> </span>{}
interface Bar {}
type Bas = {};

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//你可以将 Foo, Bar, Bas 作为类型注解使用，示例如下：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> foo: Foo;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> bar: Bar;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> bas: Bas;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//注意，尽管你定义了 interface Bar，却并不能够把它作为一个变量来使用，因为它没有定义在变量声明空间中。</span>

interface Bar {}
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = Bar; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// Error: "cannot find name 'Bar'"</span>
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">变量声明空间</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">变量声明空间包含可用作变量的内容，在上文中 Class Foo 提供了一个类型 Foo 到类型声明空间，此外它同样提供了一个变量 Foo 到变量声明空间，如下所示：</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">class</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">Foo</span> </span>{}
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> someVar = Foo;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> someOtherVar = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//WARNING：我们并不能把一些如 interface 定义的内容当作变量使用。</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//一些用 var 声明的变量，也只能在变量声明空间使用，不能用作类型注解。</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> bar: foo; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ERROR: "cannot find name 'foo'"</span>
</code></pre>
<h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">模块</h2>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">全局模块</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在默认情况下，当你开始在一个新的 TypeScript 文件中写下代码时，它处于全局命名空间中。如在 foo.ts 里的以下代码。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//foo.ts</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//bar.ts</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = foo; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// allowed</span>
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">文件模块</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">文件模块也被称为外部模块。如果在你的 TypeScript 文件的根级别位置含有 import 或者 export，那么它会在这个文件中创建一个本地的作用域。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//foo.ts</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//bar.ts 报错</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = foo; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ERROR: "cannot find name 'foo'"</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//bat.ts 正确使用方式</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { foo } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = foo; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// allow</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//在 bar.ts 文件里使用 import 时，它不仅允许你使用从其他文件导入的内容，还会将此文件 bar.ts 标记为一个模块，文件内定义的声明也不会“污染”全局命名空间</span>
</code></pre>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">文件模块详情</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">你可以根据不同的 module 选项来把 TypeScript 编译成不同的 JavaScript 模块类型，这有一些你可以忽略的东西：</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">AMD：不要使用它，它仅能在浏览器工作；<br/>
SystemJS：这是一个好的实验，已经被 ES 模块替代；<br/>
ES 模块：它并没有准备好。<br/>
使用 module: commonjs 选项来替代这些模式，将会是一个好的主意。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">放弃使用 import/require 语法即 import foo = require('foo') 写法<br/>
推荐使用 ES 模块语法</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">ES 模块语法</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 export 关键字导出一个变量或类型</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// foo.ts 方式一</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> someVar = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> type someType = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">foo</span>: string;
};


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// foo.ts 方式二</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> someVar = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;
type someType = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>: string;
};

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> { someVar, someType };


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//你也可以用重命名变量的方式导出：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> someVar = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> { someVar <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> aDifferentName };

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//使用 import 关键字导入一个变量或者是一个类型：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { someVar, someType } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//通过重命名的方式导入变量或者类型：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { someVar <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> aDifferentName } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//用整体加载，即用星号（*）指定一个对象</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> * <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> foo <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//只导入模块：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'core-js'</span>; <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 一个普通的 polyfill 库</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//从其他模块导入后整体导出：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> * <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//从其他模块导入后，部分导出：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> { someVar } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//通过重命名，部分导出从另一个模块导入的项目：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> { someVar <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> aDifferentName } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//默认导入／导出</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// some var</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> (someVar = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">123</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// some function</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">someFunction</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// some class</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">default</span> <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">class</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">someClass</span> </span>{}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//导入使用 import someName from 'someModule' 语法（你可以根据需要为导入命名）：</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> someLocalNameForThisFile <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>;
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">模块路径</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">相对模块路径（路径以 . 开头，例如：./someFile 或者 ../../someFolder/someFile 等）；<br/>
其他动态查找模块（如：core-js，typestyle，react 或者甚至是 react/core 等）。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">相对模块路径</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">1.如果文件 bar.ts 中含有 import * as foo from './foo'，那么 foo 文件必须与 bar.ts 文件存在于相同的文件夹下<br/>
2.如果文件 bar.ts 中含有 import * as foo from '../foo'，那么 foo 文件所存在的地方必须是 bar.ts 的上一级目录；<br/>
3.如果文件 bar.ts 中含有 import * as foo from '../someFolder/foo'，那么 foo 文件所在的文件夹 someFolder 必须与 bar.ts 文件所在文件夹在相同的目录下。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">动态查找</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当导入路径不是相对路径时<br/>
1.当你使用 import * as foo from 'foo'，将会按如下顺序查找模块：<br/>
./node_modules/foo<br/>
../node_modules/foo<br/>
../../node_modules/foo<br/>
直到系统的根目录<br/>
2.当你使用 import * as foo from 'something/foo'，将会按照如下顺序查找内容<br/>
./node_modules/something/foo<br/>
../node_modules/something/foo<br/>
../../node_modules/something/foo<br/>
直到系统的根目录</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">什么是 place</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当我提及被检查的 place 时，我想表达的是在这个 place 上，TypeScript 将会检查以下内容（例如一个 foo 的 place）：</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">1.如果这个 place 表示一个文件，如：foo.ts，欢呼！<br/>
2.否则，如果这个 place 是一个文件夹，并且存在一个文件 foo/index.ts，欢呼！<br/>
3.否则，如果这个 place 是一个文件夹，并且存在一个 foo/package.json 文件，在该文件中指定 types 的文件存在，那么就欢呼！<br/>
4.否则，如果这个 place 是一个文件夹，并且存在一个 package.json 文件，在该文件中指定 main 的文件存在，那么就欢呼！</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">重写类型的动态查找</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在你的项目里，你可以通过 declare module 'somePath' 声明一个全局模块的方式，来解决查找模块路径的问题。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// global.d.ts</span>
declare <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">module</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span> {
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// some variable declarations</span>
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> bar: number;
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// anyOtherTsFileInYourProject.ts</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> * <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">as</span> foo <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>;
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// TypeScript 将假设（在没有做其他查找的情况下）</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// foo 是 { bar: number }</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">import/require 仅仅是导入类型</h5>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">它实际上只做了两件事：<br/>
1.导入 foo 模块的所有类型信息；<br/>
2.确定 foo 模块运行时的依赖关系<br/>
你可以选择仅加载类型信息，而没有运行时的依赖关系。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">如果你没有把导入的名称当做变量声明空间来用，在编译成 JavaScript 时，导入的模块将会被完全移除。</strong></p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//例子1</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//编译后为空</span>


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//例子2</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">var</span> bar: foo;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//编译后</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> bar;


<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//例子3</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = foo;

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//编译后</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> bar = foo;
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">使用例子：懒加载</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">只想在需要时加载模块 foo，此时你需要仅在类型注解中使用导入的模块名称，而不是在变量中使用。在编译成 JavaScript 时，这些将会被移除。接着，你可以手动导入你需要的模块。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">loadFoo</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 这是懒加载 foo，原始的加载仅仅用来做类型注解</span>
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> _foo: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">typeof</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'foo'</span>);
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 现在，你可以使用 `_foo` 替代 `foo` 来作为一个变量使用</span>
}
</code></pre>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">使用例子：打破循环依赖</h6>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">类似于懒加载的使用用例，某些模块加载器（commonjs/node 和 amd/requirejs）不能很好的处理循环依赖。在这种情况下，一方面我们使用延迟加载代码，并在另一方面预先加载模块是很实用的。</p>
<h6 style="line-height: 160%; box-sizing: content-box; font-size: 13px; color: #333;">使用例子：确保导入</h6>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> foo = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./foo'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> bar = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./bar'</span>);
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> bas = <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">require</span>(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'./bas'</span>);

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> ensureImport: any = foo || bar || bas;
</code></pre>
<h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">命名空间</h2>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">namespace Utility {
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">log</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">msg</span>) </span>{
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(msg);
  }
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">error</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">msg</span>) </span>{
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(msg);
  }
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// usage</span>
Utility.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'Call me'</span>);
Utility.error(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'maybe'</span>);

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">//编译后</span>
(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">Utility</span>) </span>{
  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 添加属性至 Utility</span>
})(Utility || Utility = {});
</code></pre>
<h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">动态导入表达式</h2>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">我们期望 TypeScript 的输出是保留 import() 语句，而不是将其转化为其他任何代码。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在下面的代码中，我希望懒加载 moment 库，同时我也希望使用代码分割的功能，这意味 moment 会被分割到一个单独的 JavaScript 文件，当它被使用时，会被异步加载。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span>(<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/* webpackChunkName: "momentjs" */</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'moment'</span>)
  .then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">moment</span> =&gt;</span> {
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 懒加载的模块拥有所有的类型，并且能够按期工作</span>
    <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 类型检查会工作，代码引用也会工作  :100:</span>
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> time = moment().format();
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'TypeScript &gt;= 2.4.0 Dynamic Import Expression:'</span>);
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(time);
  })
  .catch(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">err</span> =&gt;</span> {
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'Failed to load moment'</span>, err);
  });
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">tsconfig.json 的配置文件：</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">{
  <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"compilerOptions"</span>: {
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"target"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"es5"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"module"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"esnext"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"lib"</span>: [
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"dom"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"es5"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"scripthost"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"es2015.promise"</span>
    ],
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"jsx"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"react"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"declaration"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sourceMap"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"outDir"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./dist/js"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"strict"</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"moduleResolution"</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"node"</span>,
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"typeRoots"</span>: [
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"./node_modules/@types"</span>
    ],
    <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"types"</span>: [
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"node"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"react"</span>,
      <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"react-dom"</span>
    ]
  }
}
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 "module": "esnext" 选项：TypeScript 保留 import() 语句，该语句用于 Webpack Code Splitting。</p>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%23%20%E7%BC%96%E8%AF%91%E4%B8%8A%E4%B8%8B%E6%96%87%0A%E7%BC%96%E8%AF%91%E4%B8%8A%E4%B8%8B%E6%96%87%E7%94%A8%E6%9D%A5%E6%96%87%E4%BB%B6%E5%88%86%E7%BB%84%EF%BC%8C%E5%91%8A%E8%AF%89TypeScript%E5%93%AA%E4%BA%9B%E6%96%87%E4%BB%B6%E6%98%AF%E6%9C%89%E6%95%88%EF%BC%8C%E5%93%AA%E4%BA%9B%E6%96%87%E4%BB%B6%E6%98%AF%E6%97%A0%E6%95%88%E7%9A%84%E3%80%82%E4%B9%9F%E5%8C%85%E5%90%AB%E4%BA%86%E6%9C%89%E5%93%AA%E4%BA%9B%E7%BC%96%E8%AF%91%E9%80%89%E9%A1%B9%E6%AD%A3%E5%9C%A8%E4%BD%BF%E7%94%A8%0A%0A%23%23%23%23%20%E7%BC%96%E8%AF%91%E9%80%89%E9%A1%B9%0A%E4%BD%A0%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20compilerOptions%20%E6%9D%A5%E5%AE%9A%E5%88%B6%E4%BD%A0%E7%9A%84%E7%BC%96%E8%AF%91%E9%80%89%E9%A1%B9%EF%BC%9A%0A%60%60%60js%0A%7B%0A%20%20%22compilerOptions%22%3A%20%7B%0A%0A%20%20%20%20%2F*%20%E5%9F%BA%E6%9C%AC%E9%80%89%E9%A1%B9%20*%2F%0A%20%20%20%20%22target%22%3A%20%22es5%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%20ECMAScript%20%E7%9B%AE%E6%A0%87%E7%89%88%E6%9C%AC%3A%20'ES3'%20(default)%2C%20'ES5'%2C%20'ES6'%2F'ES2015'%2C%20'ES2016'%2C%20'ES2017'%2C%20or%20'ESNEXT'%0A%20%20%20%20%22module%22%3A%20%22commonjs%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%E4%BD%BF%E7%94%A8%E6%A8%A1%E5%9D%97%3A%20'commonjs'%2C%20'amd'%2C%20'system'%2C%20'umd'%20or%20'es2015'%0A%20%20%20%20%22lib%22%3A%20%5B%5D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%E8%A6%81%E5%8C%85%E5%90%AB%E5%9C%A8%E7%BC%96%E8%AF%91%E4%B8%AD%E7%9A%84%E5%BA%93%E6%96%87%E4%BB%B6%0A%20%20%20%20%22allowJs%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%85%81%E8%AE%B8%E7%BC%96%E8%AF%91%20javascript%20%E6%96%87%E4%BB%B6%0A%20%20%20%20%22checkJs%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8A%A5%E5%91%8A%20javascript%20%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84%E9%94%99%E8%AF%AF%0A%20%20%20%20%22jsx%22%3A%20%22preserve%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%20jsx%20%E4%BB%A3%E7%A0%81%E7%9A%84%E7%94%9F%E6%88%90%3A%20'preserve'%2C%20'react-native'%2C%20or%20'react'%0A%20%20%20%20%22declaration%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%94%9F%E6%88%90%E7%9B%B8%E5%BA%94%E7%9A%84%20'.d.ts'%20%E6%96%87%E4%BB%B6%0A%20%20%20%20%22sourceMap%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%94%9F%E6%88%90%E7%9B%B8%E5%BA%94%E7%9A%84%20'.map'%20%E6%96%87%E4%BB%B6%0A%20%20%20%20%22outFile%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%B0%86%E8%BE%93%E5%87%BA%E6%96%87%E4%BB%B6%E5%90%88%E5%B9%B6%E4%B8%BA%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%0A%20%20%20%20%22outDir%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95%0A%20%20%20%20%22rootDir%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%94%A8%E6%9D%A5%E6%8E%A7%E5%88%B6%E8%BE%93%E5%87%BA%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%20--outDir.%0A%20%20%20%20%22removeComments%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A0%E9%99%A4%E7%BC%96%E8%AF%91%E5%90%8E%E7%9A%84%E6%89%80%E6%9C%89%E7%9A%84%E6%B3%A8%E9%87%8A%0A%20%20%20%20%22noEmit%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%8D%E7%94%9F%E6%88%90%E8%BE%93%E5%87%BA%E6%96%87%E4%BB%B6%0A%20%20%20%20%22importHelpers%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%BB%8E%20tslib%20%E5%AF%BC%E5%85%A5%E8%BE%85%E5%8A%A9%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0%0A%20%20%20%20%22isolatedModules%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%B0%86%E6%AF%8F%E4%B8%AA%E6%96%87%E4%BB%B6%E4%BD%9C%E4%B8%BA%E5%8D%95%E7%8B%AC%E7%9A%84%E6%A8%A1%E5%9D%97%20%EF%BC%88%E4%B8%8E%20'ts.transpileModule'%20%E7%B1%BB%E4%BC%BC%EF%BC%89.%0A%0A%20%20%20%20%2F*%20%E4%B8%A5%E6%A0%BC%E7%9A%84%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5%E9%80%89%E9%A1%B9%20*%2F%0A%20%20%20%20%22strict%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%90%AF%E7%94%A8%E6%89%80%E6%9C%89%E4%B8%A5%E6%A0%BC%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5%E9%80%89%E9%A1%B9%0A%20%20%20%20%22noImplicitAny%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9C%A8%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%92%8C%E5%A3%B0%E6%98%8E%E4%B8%8A%E6%9C%89%E9%9A%90%E5%90%AB%E7%9A%84%20any%E7%B1%BB%E5%9E%8B%E6%97%B6%E6%8A%A5%E9%94%99%0A%20%20%20%20%22strictNullChecks%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%90%AF%E7%94%A8%E4%B8%A5%E6%A0%BC%E7%9A%84%20null%20%E6%A3%80%E6%9F%A5%0A%20%20%20%20%22noImplicitThis%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%BD%93%20this%20%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%80%BC%E4%B8%BA%20any%20%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E9%94%99%E8%AF%AF%0A%20%20%20%20%22alwaysStrict%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%BB%A5%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E6%A3%80%E6%9F%A5%E6%AF%8F%E4%B8%AA%E6%A8%A1%E5%9D%97%EF%BC%8C%E5%B9%B6%E5%9C%A8%E6%AF%8F%E4%B8%AA%E6%96%87%E4%BB%B6%E9%87%8C%E5%8A%A0%E5%85%A5%20'use%20strict'%0A%0A%20%20%20%20%2F*%20%E9%A2%9D%E5%A4%96%E7%9A%84%E6%A3%80%E6%9F%A5%20*%2F%0A%20%20%20%20%22noUnusedLocals%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%9C%89%E6%9C%AA%E4%BD%BF%E7%94%A8%E7%9A%84%E5%8F%98%E9%87%8F%E6%97%B6%EF%BC%8C%E6%8A%9B%E5%87%BA%E9%94%99%E8%AF%AF%0A%20%20%20%20%22noUnusedParameters%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%9C%89%E6%9C%AA%E4%BD%BF%E7%94%A8%E7%9A%84%E5%8F%82%E6%95%B0%E6%97%B6%EF%BC%8C%E6%8A%9B%E5%87%BA%E9%94%99%E8%AF%AF%0A%20%20%20%20%22noImplicitReturns%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%B9%B6%E4%B8%8D%E6%98%AF%E6%89%80%E6%9C%89%E5%87%BD%E6%95%B0%E9%87%8C%E7%9A%84%E4%BB%A3%E7%A0%81%E9%83%BD%E6%9C%89%E8%BF%94%E5%9B%9E%E5%80%BC%E6%97%B6%EF%BC%8C%E6%8A%9B%E5%87%BA%E9%94%99%E8%AF%AF%0A%20%20%20%20%22noFallthroughCasesInSwitch%22%3A%20true%2C%20%20%20%20%2F%2F%20%E6%8A%A5%E5%91%8A%20switch%20%E8%AF%AD%E5%8F%A5%E7%9A%84%20fallthrough%20%E9%94%99%E8%AF%AF%E3%80%82%EF%BC%88%E5%8D%B3%EF%BC%8C%E4%B8%8D%E5%85%81%E8%AE%B8%20switch%20%E7%9A%84%20case%20%E8%AF%AD%E5%8F%A5%E8%B4%AF%E7%A9%BF%EF%BC%89%0A%0A%20%20%20%20%2F*%20%E6%A8%A1%E5%9D%97%E8%A7%A3%E6%9E%90%E9%80%89%E9%A1%B9%20*%2F%0A%20%20%20%20%22moduleResolution%22%3A%20%22node%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E9%80%89%E6%8B%A9%E6%A8%A1%E5%9D%97%E8%A7%A3%E6%9E%90%E7%AD%96%E7%95%A5%EF%BC%9A%20'node'%20(Node.js)%20or%20'classic'%20(TypeScript%20pre-1.6)%0A%20%20%20%20%22baseUrl%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%94%A8%E4%BA%8E%E8%A7%A3%E6%9E%90%E9%9D%9E%E7%9B%B8%E5%AF%B9%E6%A8%A1%E5%9D%97%E5%90%8D%E7%A7%B0%E7%9A%84%E5%9F%BA%E7%9B%AE%E5%BD%95%0A%20%20%20%20%22paths%22%3A%20%7B%7D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%A8%A1%E5%9D%97%E5%90%8D%E5%88%B0%E5%9F%BA%E4%BA%8E%20baseUrl%20%E7%9A%84%E8%B7%AF%E5%BE%84%E6%98%A0%E5%B0%84%E7%9A%84%E5%88%97%E8%A1%A8%0A%20%20%20%20%22rootDirs%22%3A%20%5B%5D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%A0%B9%E6%96%87%E4%BB%B6%E5%A4%B9%E5%88%97%E8%A1%A8%EF%BC%8C%E5%85%B6%E7%BB%84%E5%90%88%E5%86%85%E5%AE%B9%E8%A1%A8%E7%A4%BA%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C%E6%97%B6%E7%9A%84%E7%BB%93%E6%9E%84%E5%86%85%E5%AE%B9%0A%20%20%20%20%22typeRoots%22%3A%20%5B%5D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%8C%85%E5%90%AB%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%9A%84%E6%96%87%E4%BB%B6%E5%88%97%E8%A1%A8%0A%20%20%20%20%22types%22%3A%20%5B%5D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E9%9C%80%E8%A6%81%E5%8C%85%E5%90%AB%E7%9A%84%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6%E5%90%8D%E5%88%97%E8%A1%A8%0A%20%20%20%20%22allowSyntheticDefaultImports%22%3A%20true%2C%20%20%2F%2F%20%E5%85%81%E8%AE%B8%E4%BB%8E%E6%B2%A1%E6%9C%89%E8%AE%BE%E7%BD%AE%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%87%BA%E7%9A%84%E6%A8%A1%E5%9D%97%E4%B8%AD%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%85%A5%E3%80%82%0A%0A%20%20%20%20%2F*%20Source%20Map%20Options%20*%2F%0A%20%20%20%20%22sourceRoot%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%E8%B0%83%E8%AF%95%E5%99%A8%E5%BA%94%E8%AF%A5%E6%89%BE%E5%88%B0%20TypeScript%20%E6%96%87%E4%BB%B6%E8%80%8C%E4%B8%8D%E6%98%AF%E6%BA%90%E6%96%87%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%0A%20%20%20%20%22mapRoot%22%3A%20%22.%2F%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8C%87%E5%AE%9A%E8%B0%83%E8%AF%95%E5%99%A8%E5%BA%94%E8%AF%A5%E6%89%BE%E5%88%B0%E6%98%A0%E5%B0%84%E6%96%87%E4%BB%B6%E8%80%8C%E4%B8%8D%E6%98%AF%E7%94%9F%E6%88%90%E6%96%87%E4%BB%B6%E7%9A%84%E4%BD%8D%E7%BD%AE%0A%20%20%20%20%22inlineSourceMap%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%94%9F%E6%88%90%E5%8D%95%E4%B8%AA%20soucemaps%20%E6%96%87%E4%BB%B6%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%B0%86%20sourcemaps%20%E7%94%9F%E6%88%90%E4%B8%8D%E5%90%8C%E7%9A%84%E6%96%87%E4%BB%B6%0A%20%20%20%20%22inlineSources%22%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%B0%86%E4%BB%A3%E7%A0%81%E4%B8%8E%20sourcemaps%20%E7%94%9F%E6%88%90%E5%88%B0%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E8%A6%81%E6%B1%82%E5%90%8C%E6%97%B6%E8%AE%BE%E7%BD%AE%E4%BA%86%20--inlineSourceMap%20%E6%88%96%20--sourceMap%20%E5%B1%9E%E6%80%A7%0A%0A%20%20%20%20%2F*%20%E5%85%B6%E4%BB%96%E9%80%89%E9%A1%B9%20*%2F%0A%20%20%20%20%22experimentalDecorators%22%3A%20true%2C%20%20%20%20%20%20%20%20%2F%2F%20%E5%90%AF%E7%94%A8%E8%A3%85%E9%A5%B0%E5%99%A8%0A%20%20%20%20%22emitDecoratorMetadata%22%3A%20true%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%BA%E8%A3%85%E9%A5%B0%E5%99%A8%E6%8F%90%E4%BE%9B%E5%85%83%E6%95%B0%E6%8D%AE%E7%9A%84%E6%94%AF%E6%8C%81%0A%20%20%7D%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%20TypeScript%20%E7%BC%96%E8%AF%91%0A%E5%9C%A8%E4%BD%BF%E7%94%A8%20tsconfig.json%20%E6%97%B6%E4%BB%8E%E5%91%BD%E4%BB%A4%E8%A1%8C%E6%89%8B%E5%8A%A8%E8%BF%90%E8%A1%8C%20TypeScript%20%E7%BC%96%E8%AF%91%E5%99%A8%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E4%BB%A5%E4%B8%8B%E6%96%B9%E5%BC%8F%EF%BC%9A%0A%E8%BF%90%E8%A1%8C%20tsc%EF%BC%8C%E5%AE%83%E4%BC%9A%E5%9C%A8%E5%BD%93%E5%89%8D%E7%9B%AE%E5%BD%95%E6%88%96%E8%80%85%E6%98%AF%E7%88%B6%E7%BA%A7%E7%9B%AE%E5%BD%95%E5%AF%BB%E6%89%BE%20tsconfig.json%20%E6%96%87%E4%BB%B6%E3%80%82%0A%E8%BF%90%E8%A1%8C%20tsc%20-p%20.%2Fpath-to-project-directory%20%E3%80%82%E5%BD%93%E7%84%B6%EF%BC%8C%E8%BF%99%E4%B8%AA%E8%B7%AF%E5%BE%84%E5%8F%AF%E4%BB%A5%E6%98%AF%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%98%AF%E7%9B%B8%E5%AF%B9%E4%BA%8E%E5%BD%93%E5%89%8D%E7%9B%AE%E5%BD%95%E7%9A%84%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E3%80%82%0A%E4%BD%A0%E7%94%9A%E8%87%B3%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20tsc%20-w%20%E6%9D%A5%E5%90%AF%E7%94%A8%20TypeScript%20%E7%BC%96%E8%AF%91%E5%99%A8%E7%9A%84%E8%A7%82%E6%B5%8B%E6%A8%A1%E5%BC%8F%EF%BC%8C%E5%9C%A8%E6%A3%80%E6%B5%8B%E5%88%B0%E6%96%87%E4%BB%B6%E6%94%B9%E5%8A%A8%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%AE%83%E5%B0%86%E9%87%8D%E6%96%B0%E7%BC%96%E8%AF%91%E3%80%82%0A%0A%23%23%23%23%20%E6%8C%87%E5%AE%9A%E6%96%87%E4%BB%B6%0A%0A%60%60%60js%0A%2F%2F%E6%98%BE%E5%BC%8F%E6%8C%87%E5%AE%9A%E9%9C%80%E8%A6%81%E7%BC%96%E8%AF%91%E7%9A%84%E6%96%87%E4%BB%B6%EF%BC%9A%0A%7B%0A%20%20%22files%22%3A%20%5B%0A%20%20%20%20%22.%2Fsome%2Ffile.ts%22%0A%20%20%5D%0A%7D%0A%0A%0A%2F%2F%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20include%20%E5%92%8C%20exclude%20%E9%80%89%E9%A1%B9%E6%9D%A5%E6%8C%87%E5%AE%9A%E9%9C%80%E8%A6%81%E5%8C%85%E5%90%AB%E7%9A%84%E6%96%87%E4%BB%B6%E5%92%8C%E6%8E%92%E9%99%A4%E7%9A%84%E6%96%87%E4%BB%B6%0A%7B%0A%20%20%22include%22%3A%20%5B%0A%20%20%20%20%22.%2Ffolder%22%0A%20%20%5D%2C%0A%20%20%22exclude%22%3A%20%5B%0A%20%20%20%20%22.%2Ffolder%2F**%2F*.spec.ts%22%2C%0A%20%20%20%20%22.%2Ffolder%2FsomeSubFolder%22%0A%20%20%5D%0A%7D%0A%0A%2F%2F%E6%B3%A8%E6%84%8F%E4%BD%BF%E7%94%A8%20globs%EF%BC%9A**%2F*%20%EF%BC%88%E4%B8%80%E4%B8%AA%E7%A4%BA%E4%BE%8B%E7%94%A8%E6%B3%95%EF%BC%9Asome%2Ffolder%2F**%2F*%EF%BC%89%E6%84%8F%E5%91%B3%E7%9D%80%E5%8C%B9%E9%85%8D%E6%89%80%E6%9C%89%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%E5%92%8C%E6%89%80%E6%9C%89%E6%96%87%E4%BB%B6%EF%BC%88%E6%89%A9%E5%B1%95%E5%90%8D%E4%B8%BA%20.ts%2F.tsx%EF%BC%8C%E5%BD%93%E5%BC%80%E5%90%AF%E4%BA%86%20allowJs%3A%20true%20%E9%80%89%E9%A1%B9%E6%97%B6%EF%BC%8C%E6%89%A9%E5%B1%95%E5%90%8D%E5%8F%AF%E4%BB%A5%E6%98%AF%20.js%2F.jsx%EF%BC%89%E3%80%82%0A%60%60%60%0A%0A%23%23%20%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%0A%E5%9C%A8%20TypeScript%20%E9%87%8C%E5%AD%98%E5%9C%A8%E4%B8%A4%E7%A7%8D%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%EF%BC%9A%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E4%B8%8E%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%0A%0A%23%23%23%23%20%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%0A%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E5%8C%85%E5%90%AB%E7%94%A8%E6%9D%A5%E5%BD%93%E5%81%9A%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8C%E4%BE%8B%E5%A6%82%E4%B8%8B%E9%9D%A2%E7%9A%84%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%EF%BC%9A%0A%60%60%60js%0Aclass%20Foo%20%7B%7D%0Ainterface%20Bar%20%7B%7D%0Atype%20Bas%20%3D%20%7B%7D%3B%0A%0A%2F%2F%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%B0%86%20Foo%2C%20Bar%2C%20Bas%20%E4%BD%9C%E4%B8%BA%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E4%BD%BF%E7%94%A8%EF%BC%8C%E7%A4%BA%E4%BE%8B%E5%A6%82%E4%B8%8B%EF%BC%9A%0Alet%20foo%3A%20Foo%3B%0Alet%20bar%3A%20Bar%3B%0Alet%20bas%3A%20Bas%3B%0A%0A%2F%2F%E6%B3%A8%E6%84%8F%EF%BC%8C%E5%B0%BD%E7%AE%A1%E4%BD%A0%E5%AE%9A%E4%B9%89%E4%BA%86%20interface%20Bar%EF%BC%8C%E5%8D%B4%E5%B9%B6%E4%B8%8D%E8%83%BD%E5%A4%9F%E6%8A%8A%E5%AE%83%E4%BD%9C%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E6%9D%A5%E4%BD%BF%E7%94%A8%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%AE%83%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E5%9C%A8%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E4%B8%AD%E3%80%82%0A%0Ainterface%20Bar%20%7B%7D%0Aconst%20bar%20%3D%20Bar%3B%20%2F%2F%20Error%3A%20%22cannot%20find%20name%20'Bar'%22%0A%60%60%60%0A%0A%23%23%23%23%20%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%0A%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E5%8C%85%E5%90%AB%E5%8F%AF%E7%94%A8%E4%BD%9C%E5%8F%98%E9%87%8F%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8C%E5%9C%A8%E4%B8%8A%E6%96%87%E4%B8%AD%20Class%20Foo%20%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E4%B8%AA%E7%B1%BB%E5%9E%8B%20Foo%20%E5%88%B0%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%EF%BC%8C%E6%AD%A4%E5%A4%96%E5%AE%83%E5%90%8C%E6%A0%B7%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%20Foo%20%E5%88%B0%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%EF%BC%8C%E5%A6%82%E4%B8%8B%E6%89%80%E7%A4%BA%EF%BC%9A%0A%60%60%60js%0Aclass%20Foo%20%7B%7D%0Aconst%20someVar%20%3D%20Foo%3B%0Aconst%20someOtherVar%20%3D%20123%3B%0A%0A%2F%2FWARNING%EF%BC%9A%E6%88%91%E4%BB%AC%E5%B9%B6%E4%B8%8D%E8%83%BD%E6%8A%8A%E4%B8%80%E4%BA%9B%E5%A6%82%20interface%20%E5%AE%9A%E4%B9%89%E7%9A%84%E5%86%85%E5%AE%B9%E5%BD%93%E4%BD%9C%E5%8F%98%E9%87%8F%E4%BD%BF%E7%94%A8%E3%80%82%0A%0A%2F%2F%E4%B8%80%E4%BA%9B%E7%94%A8%20var%20%E5%A3%B0%E6%98%8E%E7%9A%84%E5%8F%98%E9%87%8F%EF%BC%8C%E4%B9%9F%E5%8F%AA%E8%83%BD%E5%9C%A8%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E4%BD%BF%E7%94%A8%EF%BC%8C%E4%B8%8D%E8%83%BD%E7%94%A8%E4%BD%9C%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E3%80%82%0Aconst%20foo%20%3D%20123%3B%0Alet%20bar%3A%20foo%3B%20%2F%2F%20ERROR%3A%20%22cannot%20find%20name%20'foo'%22%0A%60%60%60%0A%0A%23%23%20%E6%A8%A1%E5%9D%97%0A%23%23%23%23%20%E5%85%A8%E5%B1%80%E6%A8%A1%E5%9D%97%0A%E5%9C%A8%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E5%BD%93%E4%BD%A0%E5%BC%80%E5%A7%8B%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%20TypeScript%20%E6%96%87%E4%BB%B6%E4%B8%AD%E5%86%99%E4%B8%8B%E4%BB%A3%E7%A0%81%E6%97%B6%EF%BC%8C%E5%AE%83%E5%A4%84%E4%BA%8E%E5%85%A8%E5%B1%80%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%E4%B8%AD%E3%80%82%E5%A6%82%E5%9C%A8%20foo.ts%20%E9%87%8C%E7%9A%84%E4%BB%A5%E4%B8%8B%E4%BB%A3%E7%A0%81%E3%80%82%0A%60%60%60js%0A%2F%2Ffoo.ts%0Aconst%20foo%20%3D%20123%3B%0A%0A%2F%2Fbar.ts%0Aconst%20bar%20%3D%20foo%3B%20%2F%2F%20allowed%0A%60%60%60%0A%0A%23%23%23%23%20%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%0A%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E4%B9%9F%E8%A2%AB%E7%A7%B0%E4%B8%BA%E5%A4%96%E9%83%A8%E6%A8%A1%E5%9D%97%E3%80%82%E5%A6%82%E6%9E%9C%E5%9C%A8%E4%BD%A0%E7%9A%84%20TypeScript%20%E6%96%87%E4%BB%B6%E7%9A%84%E6%A0%B9%E7%BA%A7%E5%88%AB%E4%BD%8D%E7%BD%AE%E5%90%AB%E6%9C%89%20import%20%E6%88%96%E8%80%85%20export%EF%BC%8C%E9%82%A3%E4%B9%88%E5%AE%83%E4%BC%9A%E5%9C%A8%E8%BF%99%E4%B8%AA%E6%96%87%E4%BB%B6%E4%B8%AD%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%AC%E5%9C%B0%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E3%80%82%0A%60%60%60js%0A%2F%2Ffoo.ts%0Aexport%20const%20foo%20%3D%20123%3B%0A%0A%2F%2Fbar.ts%20%E6%8A%A5%E9%94%99%0Aconst%20bar%20%3D%20foo%3B%20%2F%2F%20ERROR%3A%20%22cannot%20find%20name%20'foo'%22%0A%0A%2F%2Fbat.ts%20%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%0Aimport%20%7B%20foo%20%7D%20from%20'.%2Ffoo'%3B%0Aconst%20bar%20%3D%20foo%3B%20%2F%2F%20allow%0A%2F%2F%E5%9C%A8%20bar.ts%20%E6%96%87%E4%BB%B6%E9%87%8C%E4%BD%BF%E7%94%A8%20import%20%E6%97%B6%EF%BC%8C%E5%AE%83%E4%B8%8D%E4%BB%85%E5%85%81%E8%AE%B8%E4%BD%A0%E4%BD%BF%E7%94%A8%E4%BB%8E%E5%85%B6%E4%BB%96%E6%96%87%E4%BB%B6%E5%AF%BC%E5%85%A5%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8C%E8%BF%98%E4%BC%9A%E5%B0%86%E6%AD%A4%E6%96%87%E4%BB%B6%20bar.ts%20%E6%A0%87%E8%AE%B0%E4%B8%BA%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%EF%BC%8C%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%9A%E4%B9%89%E7%9A%84%E5%A3%B0%E6%98%8E%E4%B9%9F%E4%B8%8D%E4%BC%9A%E2%80%9C%E6%B1%A1%E6%9F%93%E2%80%9D%E5%85%A8%E5%B1%80%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%0A%60%60%60%0A%0A%23%23%23%23%20%E6%96%87%E4%BB%B6%E6%A8%A1%E5%9D%97%E8%AF%A6%E6%83%85%0A%0A%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%A0%B9%E6%8D%AE%E4%B8%8D%E5%90%8C%E7%9A%84%20module%20%E9%80%89%E9%A1%B9%E6%9D%A5%E6%8A%8A%20TypeScript%20%E7%BC%96%E8%AF%91%E6%88%90%E4%B8%8D%E5%90%8C%E7%9A%84%20JavaScript%20%E6%A8%A1%E5%9D%97%E7%B1%BB%E5%9E%8B%EF%BC%8C%E8%BF%99%E6%9C%89%E4%B8%80%E4%BA%9B%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%BF%BD%E7%95%A5%E7%9A%84%E4%B8%9C%E8%A5%BF%EF%BC%9A%0A%0AAMD%EF%BC%9A%E4%B8%8D%E8%A6%81%E4%BD%BF%E7%94%A8%E5%AE%83%EF%BC%8C%E5%AE%83%E4%BB%85%E8%83%BD%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%B7%A5%E4%BD%9C%EF%BC%9B%0ASystemJS%EF%BC%9A%E8%BF%99%E6%98%AF%E4%B8%80%E4%B8%AA%E5%A5%BD%E7%9A%84%E5%AE%9E%E9%AA%8C%EF%BC%8C%E5%B7%B2%E7%BB%8F%E8%A2%AB%20ES%20%E6%A8%A1%E5%9D%97%E6%9B%BF%E4%BB%A3%EF%BC%9B%0AES%20%E6%A8%A1%E5%9D%97%EF%BC%9A%E5%AE%83%E5%B9%B6%E6%B2%A1%E6%9C%89%E5%87%86%E5%A4%87%E5%A5%BD%E3%80%82%0A%E4%BD%BF%E7%94%A8%20module%3A%20commonjs%20%E9%80%89%E9%A1%B9%E6%9D%A5%E6%9B%BF%E4%BB%A3%E8%BF%99%E4%BA%9B%E6%A8%A1%E5%BC%8F%EF%BC%8C%E5%B0%86%E4%BC%9A%E6%98%AF%E4%B8%80%E4%B8%AA%E5%A5%BD%E7%9A%84%E4%B8%BB%E6%84%8F%E3%80%82%0A%0A%E6%94%BE%E5%BC%83%E4%BD%BF%E7%94%A8%20import%2Frequire%20%E8%AF%AD%E6%B3%95%E5%8D%B3%20import%20foo%20%3D%20require('foo')%20%E5%86%99%E6%B3%95%0A%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%20ES%20%E6%A8%A1%E5%9D%97%E8%AF%AD%E6%B3%95%0A%0A%23%23%23%23%23%20ES%20%E6%A8%A1%E5%9D%97%E8%AF%AD%E6%B3%95%0A%E4%BD%BF%E7%94%A8%20export%20%E5%85%B3%E9%94%AE%E5%AD%97%E5%AF%BC%E5%87%BA%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E6%88%96%E7%B1%BB%E5%9E%8B%0A%60%60%60js%0A%2F%2F%20foo.ts%20%E6%96%B9%E5%BC%8F%E4%B8%80%0Aexport%20const%20someVar%20%3D%20123%3B%0Aexport%20type%20someType%20%3D%20%7B%0A%20%20foo%3A%20string%3B%0A%7D%3B%0A%0A%0A%2F%2F%20foo.ts%20%E6%96%B9%E5%BC%8F%E4%BA%8C%0Aconst%20someVar%20%3D%20123%3B%0Atype%20someType%20%3D%20%7B%0A%20%20type%3A%20string%3B%0A%7D%3B%0A%0Aexport%20%7B%20someVar%2C%20someType%20%7D%3B%0A%0A%0A%2F%2F%E4%BD%A0%E4%B9%9F%E5%8F%AF%E4%BB%A5%E7%94%A8%E9%87%8D%E5%91%BD%E5%90%8D%E5%8F%98%E9%87%8F%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AF%BC%E5%87%BA%EF%BC%9A%0Aconst%20someVar%20%3D%20123%3B%0Aexport%20%7B%20someVar%20as%20aDifferentName%20%7D%3B%0A%0A%2F%2F%E4%BD%BF%E7%94%A8%20import%20%E5%85%B3%E9%94%AE%E5%AD%97%E5%AF%BC%E5%85%A5%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E6%88%96%E8%80%85%E6%98%AF%E4%B8%80%E4%B8%AA%E7%B1%BB%E5%9E%8B%EF%BC%9A%0Aimport%20%7B%20someVar%2C%20someType%20%7D%20from%20'.%2Ffoo'%3B%0A%0A%2F%2F%E9%80%9A%E8%BF%87%E9%87%8D%E5%91%BD%E5%90%8D%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AF%BC%E5%85%A5%E5%8F%98%E9%87%8F%E6%88%96%E8%80%85%E7%B1%BB%E5%9E%8B%EF%BC%9A%0Aimport%20%7B%20someVar%20as%20aDifferentName%20%7D%20from%20'.%2Ffoo'%3B%0A%0A%2F%2F%E7%94%A8%E6%95%B4%E4%BD%93%E5%8A%A0%E8%BD%BD%EF%BC%8C%E5%8D%B3%E7%94%A8%E6%98%9F%E5%8F%B7%EF%BC%88*%EF%BC%89%E6%8C%87%E5%AE%9A%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%0Aimport%20*%20as%20foo%20from%20'.%2Ffoo'%3B%0A%0A%0A%2F%2F%E5%8F%AA%E5%AF%BC%E5%85%A5%E6%A8%A1%E5%9D%97%EF%BC%9A%0Aimport%20'core-js'%3B%20%2F%2F%20%E4%B8%80%E4%B8%AA%E6%99%AE%E9%80%9A%E7%9A%84%20polyfill%20%E5%BA%93%0A%0A%2F%2F%E4%BB%8E%E5%85%B6%E4%BB%96%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5%E5%90%8E%E6%95%B4%E4%BD%93%E5%AF%BC%E5%87%BA%EF%BC%9A%0Aexport%20*%20from%20'.%2Ffoo'%3B%0A%0A%2F%2F%E4%BB%8E%E5%85%B6%E4%BB%96%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5%E5%90%8E%EF%BC%8C%E9%83%A8%E5%88%86%E5%AF%BC%E5%87%BA%EF%BC%9A%0Aexport%20%7B%20someVar%20%7D%20from%20'.%2Ffoo'%3B%0A%0A%2F%2F%E9%80%9A%E8%BF%87%E9%87%8D%E5%91%BD%E5%90%8D%EF%BC%8C%E9%83%A8%E5%88%86%E5%AF%BC%E5%87%BA%E4%BB%8E%E5%8F%A6%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%AF%BC%E5%85%A5%E7%9A%84%E9%A1%B9%E7%9B%AE%EF%BC%9A%0Aexport%20%7B%20someVar%20as%20aDifferentName%20%7D%20from%20'.%2Ffoo'%3B%0A%0A%2F%2F%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%85%A5%EF%BC%8F%E5%AF%BC%E5%87%BA%0A%2F%2F%20some%20var%0Aexport%20default%20(someVar%20%3D%20123)%3B%0A%0A%2F%2F%20some%20function%0Aexport%20default%20function%20someFunction()%20%7B%7D%0A%0A%2F%2F%20some%20class%0Aexport%20default%20class%20someClass%20%7B%7D%0A%0A%2F%2F%E5%AF%BC%E5%85%A5%E4%BD%BF%E7%94%A8%20import%20someName%20from%20'someModule'%20%E8%AF%AD%E6%B3%95%EF%BC%88%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%A0%B9%E6%8D%AE%E9%9C%80%E8%A6%81%E4%B8%BA%E5%AF%BC%E5%85%A5%E5%91%BD%E5%90%8D%EF%BC%89%EF%BC%9A%0Aimport%20someLocalNameForThisFile%20from%20'.%2Ffoo'%3B%0A%60%60%60%0A%0A%23%23%23%23%23%20%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%0A%E7%9B%B8%E5%AF%B9%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%EF%BC%88%E8%B7%AF%E5%BE%84%E4%BB%A5%20.%20%E5%BC%80%E5%A4%B4%EF%BC%8C%E4%BE%8B%E5%A6%82%EF%BC%9A.%2FsomeFile%20%E6%88%96%E8%80%85%20..%2F..%2FsomeFolder%2FsomeFile%20%E7%AD%89%EF%BC%89%EF%BC%9B%0A%E5%85%B6%E4%BB%96%E5%8A%A8%E6%80%81%E6%9F%A5%E6%89%BE%E6%A8%A1%E5%9D%97%EF%BC%88%E5%A6%82%EF%BC%9Acore-js%EF%BC%8Ctypestyle%EF%BC%8Creact%20%E6%88%96%E8%80%85%E7%94%9A%E8%87%B3%E6%98%AF%20react%2Fcore%20%E7%AD%89%EF%BC%89%E3%80%82%0A%0A%23%23%23%23%23%23%20%E7%9B%B8%E5%AF%B9%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%0A1.%E5%A6%82%E6%9E%9C%E6%96%87%E4%BB%B6%20bar.ts%20%E4%B8%AD%E5%90%AB%E6%9C%89%20import%20*%20as%20foo%20from%20'.%2Ffoo'%EF%BC%8C%E9%82%A3%E4%B9%88%20foo%20%E6%96%87%E4%BB%B6%E5%BF%85%E9%A1%BB%E4%B8%8E%20bar.ts%20%E6%96%87%E4%BB%B6%E5%AD%98%E5%9C%A8%E4%BA%8E%E7%9B%B8%E5%90%8C%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%0A2.%E5%A6%82%E6%9E%9C%E6%96%87%E4%BB%B6%20bar.ts%20%E4%B8%AD%E5%90%AB%E6%9C%89%20import%20*%20as%20foo%20from%20'..%2Ffoo'%EF%BC%8C%E9%82%A3%E4%B9%88%20foo%20%E6%96%87%E4%BB%B6%E6%89%80%E5%AD%98%E5%9C%A8%E7%9A%84%E5%9C%B0%E6%96%B9%E5%BF%85%E9%A1%BB%E6%98%AF%20bar.ts%20%E7%9A%84%E4%B8%8A%E4%B8%80%E7%BA%A7%E7%9B%AE%E5%BD%95%EF%BC%9B%0A3.%E5%A6%82%E6%9E%9C%E6%96%87%E4%BB%B6%20bar.ts%20%E4%B8%AD%E5%90%AB%E6%9C%89%20import%20*%20as%20foo%20from%20'..%2FsomeFolder%2Ffoo'%EF%BC%8C%E9%82%A3%E4%B9%88%20foo%20%E6%96%87%E4%BB%B6%E6%89%80%E5%9C%A8%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%20someFolder%20%E5%BF%85%E9%A1%BB%E4%B8%8E%20bar.ts%20%E6%96%87%E4%BB%B6%E6%89%80%E5%9C%A8%E6%96%87%E4%BB%B6%E5%A4%B9%E5%9C%A8%E7%9B%B8%E5%90%8C%E7%9A%84%E7%9B%AE%E5%BD%95%E4%B8%8B%E3%80%82%0A%0A%23%23%23%23%23%23%20%E5%8A%A8%E6%80%81%E6%9F%A5%E6%89%BE%0A%E5%BD%93%E5%AF%BC%E5%85%A5%E8%B7%AF%E5%BE%84%E4%B8%8D%E6%98%AF%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E6%97%B6%0A1.%E5%BD%93%E4%BD%A0%E4%BD%BF%E7%94%A8%20import%20*%20as%20foo%20from%20'foo'%EF%BC%8C%E5%B0%86%E4%BC%9A%E6%8C%89%E5%A6%82%E4%B8%8B%E9%A1%BA%E5%BA%8F%E6%9F%A5%E6%89%BE%E6%A8%A1%E5%9D%97%EF%BC%9A%0A.%2Fnode_modules%2Ffoo%0A..%2Fnode_modules%2Ffoo%0A..%2F..%2Fnode_modules%2Ffoo%0A%E7%9B%B4%E5%88%B0%E7%B3%BB%E7%BB%9F%E7%9A%84%E6%A0%B9%E7%9B%AE%E5%BD%95%0A2.%E5%BD%93%E4%BD%A0%E4%BD%BF%E7%94%A8%20import%20*%20as%20foo%20from%20'something%2Ffoo'%EF%BC%8C%E5%B0%86%E4%BC%9A%E6%8C%89%E7%85%A7%E5%A6%82%E4%B8%8B%E9%A1%BA%E5%BA%8F%E6%9F%A5%E6%89%BE%E5%86%85%E5%AE%B9%0A.%2Fnode_modules%2Fsomething%2Ffoo%0A..%2Fnode_modules%2Fsomething%2Ffoo%0A..%2F..%2Fnode_modules%2Fsomething%2Ffoo%0A%E7%9B%B4%E5%88%B0%E7%B3%BB%E7%BB%9F%E7%9A%84%E6%A0%B9%E7%9B%AE%E5%BD%95%0A%0A%23%23%23%23%23%23%20%E4%BB%80%E4%B9%88%E6%98%AF%20place%0A%E5%BD%93%E6%88%91%E6%8F%90%E5%8F%8A%E8%A2%AB%E6%A3%80%E6%9F%A5%E7%9A%84%20place%20%E6%97%B6%EF%BC%8C%E6%88%91%E6%83%B3%E8%A1%A8%E8%BE%BE%E7%9A%84%E6%98%AF%E5%9C%A8%E8%BF%99%E4%B8%AA%20place%20%E4%B8%8A%EF%BC%8CTypeScript%20%E5%B0%86%E4%BC%9A%E6%A3%80%E6%9F%A5%E4%BB%A5%E4%B8%8B%E5%86%85%E5%AE%B9%EF%BC%88%E4%BE%8B%E5%A6%82%E4%B8%80%E4%B8%AA%20foo%20%E7%9A%84%20place%EF%BC%89%EF%BC%9A%0A%0A1.%E5%A6%82%E6%9E%9C%E8%BF%99%E4%B8%AA%20place%20%E8%A1%A8%E7%A4%BA%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%EF%BC%8C%E5%A6%82%EF%BC%9Afoo.ts%EF%BC%8C%E6%AC%A2%E5%91%BC%EF%BC%81%0A2.%E5%90%A6%E5%88%99%EF%BC%8C%E5%A6%82%E6%9E%9C%E8%BF%99%E4%B8%AA%20place%20%E6%98%AF%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%AD%98%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%20foo%2Findex.ts%EF%BC%8C%E6%AC%A2%E5%91%BC%EF%BC%81%0A3.%E5%90%A6%E5%88%99%EF%BC%8C%E5%A6%82%E6%9E%9C%E8%BF%99%E4%B8%AA%20place%20%E6%98%AF%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%AD%98%E5%9C%A8%E4%B8%80%E4%B8%AA%20foo%2Fpackage.json%20%E6%96%87%E4%BB%B6%EF%BC%8C%E5%9C%A8%E8%AF%A5%E6%96%87%E4%BB%B6%E4%B8%AD%E6%8C%87%E5%AE%9A%20types%20%E7%9A%84%E6%96%87%E4%BB%B6%E5%AD%98%E5%9C%A8%EF%BC%8C%E9%82%A3%E4%B9%88%E5%B0%B1%E6%AC%A2%E5%91%BC%EF%BC%81%0A4.%E5%90%A6%E5%88%99%EF%BC%8C%E5%A6%82%E6%9E%9C%E8%BF%99%E4%B8%AA%20place%20%E6%98%AF%E4%B8%80%E4%B8%AA%E6%96%87%E4%BB%B6%E5%A4%B9%EF%BC%8C%E5%B9%B6%E4%B8%94%E5%AD%98%E5%9C%A8%E4%B8%80%E4%B8%AA%20package.json%20%E6%96%87%E4%BB%B6%EF%BC%8C%E5%9C%A8%E8%AF%A5%E6%96%87%E4%BB%B6%E4%B8%AD%E6%8C%87%E5%AE%9A%20main%20%E7%9A%84%E6%96%87%E4%BB%B6%E5%AD%98%E5%9C%A8%EF%BC%8C%E9%82%A3%E4%B9%88%E5%B0%B1%E6%AC%A2%E5%91%BC%EF%BC%81%0A%0A%23%23%23%23%23%20%E9%87%8D%E5%86%99%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%8A%A8%E6%80%81%E6%9F%A5%E6%89%BE%0A%0A%E5%9C%A8%E4%BD%A0%E7%9A%84%E9%A1%B9%E7%9B%AE%E9%87%8C%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%20declare%20module%20'somePath'%20%E5%A3%B0%E6%98%8E%E4%B8%80%E4%B8%AA%E5%85%A8%E5%B1%80%E6%A8%A1%E5%9D%97%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E6%9D%A5%E8%A7%A3%E5%86%B3%E6%9F%A5%E6%89%BE%E6%A8%A1%E5%9D%97%E8%B7%AF%E5%BE%84%E7%9A%84%E9%97%AE%E9%A2%98%E3%80%82%0A%60%60%60js%0A%2F%2F%20global.d.ts%0Adeclare%20module%20'foo'%20%7B%0A%20%20%2F%2F%20some%20variable%20declarations%0A%20%20export%20var%20bar%3A%20number%3B%0A%7D%0A%0A%2F%2F%20anyOtherTsFileInYourProject.ts%0Aimport%20*%20as%20foo%20from%20'foo'%3B%0A%2F%2F%20TypeScript%20%E5%B0%86%E5%81%87%E8%AE%BE%EF%BC%88%E5%9C%A8%E6%B2%A1%E6%9C%89%E5%81%9A%E5%85%B6%E4%BB%96%E6%9F%A5%E6%89%BE%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%89%0A%2F%2F%20foo%20%E6%98%AF%20%7B%20bar%3A%20number%20%7D%0A%60%60%60%0A%0A%23%23%23%23%23%20import%2Frequire%20%E4%BB%85%E4%BB%85%E6%98%AF%E5%AF%BC%E5%85%A5%E7%B1%BB%E5%9E%8B%0A%60%60%60js%0Aimport%20foo%20%3D%20require('foo')%3B%0A%60%60%60%0A%E5%AE%83%E5%AE%9E%E9%99%85%E4%B8%8A%E5%8F%AA%E5%81%9A%E4%BA%86%E4%B8%A4%E4%BB%B6%E4%BA%8B%EF%BC%9A%0A1.%E5%AF%BC%E5%85%A5%20foo%20%E6%A8%A1%E5%9D%97%E7%9A%84%E6%89%80%E6%9C%89%E7%B1%BB%E5%9E%8B%E4%BF%A1%E6%81%AF%EF%BC%9B%0A2.%E7%A1%AE%E5%AE%9A%20foo%20%E6%A8%A1%E5%9D%97%E8%BF%90%E8%A1%8C%E6%97%B6%E7%9A%84%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB%0A%E4%BD%A0%E5%8F%AF%E4%BB%A5%E9%80%89%E6%8B%A9%E4%BB%85%E5%8A%A0%E8%BD%BD%E7%B1%BB%E5%9E%8B%E4%BF%A1%E6%81%AF%EF%BC%8C%E8%80%8C%E6%B2%A1%E6%9C%89%E8%BF%90%E8%A1%8C%E6%97%B6%E7%9A%84%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB%E3%80%82%0A%0A**%E5%A6%82%E6%9E%9C%E4%BD%A0%E6%B2%A1%E6%9C%89%E6%8A%8A%E5%AF%BC%E5%85%A5%E7%9A%84%E5%90%8D%E7%A7%B0%E5%BD%93%E5%81%9A%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4%E6%9D%A5%E7%94%A8%EF%BC%8C%E5%9C%A8%E7%BC%96%E8%AF%91%E6%88%90%20JavaScript%20%E6%97%B6%EF%BC%8C%E5%AF%BC%E5%85%A5%E7%9A%84%E6%A8%A1%E5%9D%97%E5%B0%86%E4%BC%9A%E8%A2%AB%E5%AE%8C%E5%85%A8%E7%A7%BB%E9%99%A4%E3%80%82**%0A%0A%60%60%60js%0A%2F%2F%E4%BE%8B%E5%AD%901%0Aimport%20foo%20%3D%20require('foo')%3B%0A%0A%2F%2F%E7%BC%96%E8%AF%91%E5%90%8E%E4%B8%BA%E7%A9%BA%0A%0A%0A%2F%2F%E4%BE%8B%E5%AD%902%0Aimport%20foo%20%3D%20require('foo')%3B%0Avar%20bar%3A%20foo%3B%0A%0A%2F%2F%E7%BC%96%E8%AF%91%E5%90%8E%0Alet%20bar%3B%0A%0A%0A%2F%2F%E4%BE%8B%E5%AD%903%0Aimport%20foo%20%3D%20require('foo')%3B%0Aconst%20bar%20%3D%20foo%3B%0A%0A%2F%2F%E7%BC%96%E8%AF%91%E5%90%8E%0Aconst%20foo%20%3D%20require('foo')%3B%0Aconst%20bar%20%3D%20foo%3B%0A%60%60%60%0A%0A%23%23%23%23%23%23%20%E4%BD%BF%E7%94%A8%E4%BE%8B%E5%AD%90%EF%BC%9A%E6%87%92%E5%8A%A0%E8%BD%BD%0A%E5%8F%AA%E6%83%B3%E5%9C%A8%E9%9C%80%E8%A6%81%E6%97%B6%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97%20foo%EF%BC%8C%E6%AD%A4%E6%97%B6%E4%BD%A0%E9%9C%80%E8%A6%81%E4%BB%85%E5%9C%A8%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%AF%BC%E5%85%A5%E7%9A%84%E6%A8%A1%E5%9D%97%E5%90%8D%E7%A7%B0%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%9C%A8%E5%8F%98%E9%87%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%E3%80%82%E5%9C%A8%E7%BC%96%E8%AF%91%E6%88%90%20JavaScript%20%E6%97%B6%EF%BC%8C%E8%BF%99%E4%BA%9B%E5%B0%86%E4%BC%9A%E8%A2%AB%E7%A7%BB%E9%99%A4%E3%80%82%E6%8E%A5%E7%9D%80%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%89%8B%E5%8A%A8%E5%AF%BC%E5%85%A5%E4%BD%A0%E9%9C%80%E8%A6%81%E7%9A%84%E6%A8%A1%E5%9D%97%E3%80%82%0A%60%60%60js%0Aimport%20foo%20%3D%20require('foo')%3B%0A%0Aexport%20function%20loadFoo()%20%7B%0A%20%20%2F%2F%20%E8%BF%99%E6%98%AF%E6%87%92%E5%8A%A0%E8%BD%BD%20foo%EF%BC%8C%E5%8E%9F%E5%A7%8B%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%BB%85%E4%BB%85%E7%94%A8%E6%9D%A5%E5%81%9A%E7%B1%BB%E5%9E%8B%E6%B3%A8%E8%A7%A3%0A%20%20const%20_foo%3A%20typeof%20foo%20%3D%20require('foo')%3B%0A%20%20%2F%2F%20%E7%8E%B0%E5%9C%A8%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20%60_foo%60%20%E6%9B%BF%E4%BB%A3%20%60foo%60%20%E6%9D%A5%E4%BD%9C%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F%E4%BD%BF%E7%94%A8%0A%7D%0A%60%60%60%0A%0A%23%23%23%23%23%23%20%E4%BD%BF%E7%94%A8%E4%BE%8B%E5%AD%90%EF%BC%9A%E6%89%93%E7%A0%B4%E5%BE%AA%E7%8E%AF%E4%BE%9D%E8%B5%96%0A%E7%B1%BB%E4%BC%BC%E4%BA%8E%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%BD%BF%E7%94%A8%E7%94%A8%E4%BE%8B%EF%BC%8C%E6%9F%90%E4%BA%9B%E6%A8%A1%E5%9D%97%E5%8A%A0%E8%BD%BD%E5%99%A8%EF%BC%88commonjs%2Fnode%20%E5%92%8C%20amd%2Frequirejs%EF%BC%89%E4%B8%8D%E8%83%BD%E5%BE%88%E5%A5%BD%E7%9A%84%E5%A4%84%E7%90%86%E5%BE%AA%E7%8E%AF%E4%BE%9D%E8%B5%96%E3%80%82%E5%9C%A8%E8%BF%99%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E4%B8%80%E6%96%B9%E9%9D%A2%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E4%BB%A3%E7%A0%81%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8F%A6%E4%B8%80%E6%96%B9%E9%9D%A2%E9%A2%84%E5%85%88%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97%E6%98%AF%E5%BE%88%E5%AE%9E%E7%94%A8%E7%9A%84%E3%80%82%0A%0A%23%23%23%23%23%23%20%E4%BD%BF%E7%94%A8%E4%BE%8B%E5%AD%90%EF%BC%9A%E7%A1%AE%E4%BF%9D%E5%AF%BC%E5%85%A5%0A%60%60%60js%0Aimport%20foo%20%3D%20require('.%2Ffoo')%3B%0Aimport%20bar%20%3D%20require('.%2Fbar')%3B%0Aimport%20bas%20%3D%20require('.%2Fbas')%3B%0A%0Aconst%20ensureImport%3A%20any%20%3D%20foo%20%7C%7C%20bar%20%7C%7C%20bas%3B%0A%60%60%60%0A%0A%23%23%20%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%0A%60%60%60js%0Anamespace%20Utility%20%7B%0A%20%20export%20function%20log(msg)%20%7B%0A%20%20%20%20console.log(msg)%3B%0A%20%20%7D%0A%20%20export%20function%20error(msg)%20%7B%0A%20%20%20%20console.log(msg)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20usage%0AUtility.log('Call%20me')%3B%0AUtility.error('maybe')%3B%0A%0A%2F%2F%E7%BC%96%E8%AF%91%E5%90%8E%0A(function%20(Utility)%20%7B%0A%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%E5%B1%9E%E6%80%A7%E8%87%B3%20Utility%0A%7D)(Utility%20%7C%7C%20Utility%20%3D%20%7B%7D)%3B%0A%60%60%60%0A%0A%23%23%20%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5%E8%A1%A8%E8%BE%BE%E5%BC%8F%0A%E6%88%91%E4%BB%AC%E6%9C%9F%E6%9C%9B%20TypeScript%20%E7%9A%84%E8%BE%93%E5%87%BA%E6%98%AF%E4%BF%9D%E7%95%99%20import()%20%E8%AF%AD%E5%8F%A5%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E5%B0%86%E5%85%B6%E8%BD%AC%E5%8C%96%E4%B8%BA%E5%85%B6%E4%BB%96%E4%BB%BB%E4%BD%95%E4%BB%A3%E7%A0%81%E3%80%82%0A%0A%E5%9C%A8%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E4%B8%AD%EF%BC%8C%E6%88%91%E5%B8%8C%E6%9C%9B%E6%87%92%E5%8A%A0%E8%BD%BD%20moment%20%E5%BA%93%EF%BC%8C%E5%90%8C%E6%97%B6%E6%88%91%E4%B9%9F%E5%B8%8C%E6%9C%9B%E4%BD%BF%E7%94%A8%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E7%9A%84%E5%8A%9F%E8%83%BD%EF%BC%8C%E8%BF%99%E6%84%8F%E5%91%B3%20moment%20%E4%BC%9A%E8%A2%AB%E5%88%86%E5%89%B2%E5%88%B0%E4%B8%80%E4%B8%AA%E5%8D%95%E7%8B%AC%E7%9A%84%20JavaScript%20%E6%96%87%E4%BB%B6%EF%BC%8C%E5%BD%93%E5%AE%83%E8%A2%AB%E4%BD%BF%E7%94%A8%E6%97%B6%EF%BC%8C%E4%BC%9A%E8%A2%AB%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E3%80%82%0A%60%60%60js%0Aimport(%2F*%20webpackChunkName%3A%20%22momentjs%22%20*%2F%20'moment')%0A%20%20.then(moment%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20%E6%87%92%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%A8%A1%E5%9D%97%E6%8B%A5%E6%9C%89%E6%89%80%E6%9C%89%E7%9A%84%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%B9%B6%E4%B8%94%E8%83%BD%E5%A4%9F%E6%8C%89%E6%9C%9F%E5%B7%A5%E4%BD%9C%0A%20%20%20%20%2F%2F%20%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5%E4%BC%9A%E5%B7%A5%E4%BD%9C%EF%BC%8C%E4%BB%A3%E7%A0%81%E5%BC%95%E7%94%A8%E4%B9%9F%E4%BC%9A%E5%B7%A5%E4%BD%9C%20%20%3A100%3A%0A%20%20%20%20const%20time%20%3D%20moment().format()%3B%0A%20%20%20%20console.log('TypeScript%20%3E%3D%202.4.0%20Dynamic%20Import%20Expression%3A')%3B%0A%20%20%20%20console.log(time)%3B%0A%20%20%7D)%0A%20%20.catch(err%20%3D%3E%20%7B%0A%20%20%20%20console.log('Failed%20to%20load%20moment'%2C%20err)%3B%0A%20%20%7D)%3B%0A%60%60%60%0A%0Atsconfig.json%20%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%EF%BC%9A%0A%60%60%60js%0A%7B%0A%20%20%22compilerOptions%22%3A%20%7B%0A%20%20%20%20%22target%22%3A%20%22es5%22%2C%0A%20%20%20%20%22module%22%3A%20%22esnext%22%2C%0A%20%20%20%20%22lib%22%3A%20%5B%0A%20%20%20%20%20%20%22dom%22%2C%0A%20%20%20%20%20%20%22es5%22%2C%0A%20%20%20%20%20%20%22scripthost%22%2C%0A%20%20%20%20%20%20%22es2015.promise%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22jsx%22%3A%20%22react%22%2C%0A%20%20%20%20%22declaration%22%3A%20false%2C%0A%20%20%20%20%22sourceMap%22%3A%20true%2C%0A%20%20%20%20%22outDir%22%3A%20%22.%2Fdist%2Fjs%22%2C%0A%20%20%20%20%22strict%22%3A%20true%2C%0A%20%20%20%20%22moduleResolution%22%3A%20%22node%22%2C%0A%20%20%20%20%22typeRoots%22%3A%20%5B%0A%20%20%20%20%20%20%22.%2Fnode_modules%2F%40types%22%0A%20%20%20%20%5D%2C%0A%20%20%20%20%22types%22%3A%20%5B%0A%20%20%20%20%20%20%22node%22%2C%0A%20%20%20%20%20%20%22react%22%2C%0A%20%20%20%20%20%20%22react-dom%22%0A%20%20%20%20%5D%0A%20%20%7D%0A%7D%0A%60%60%60%0A%0A%E4%BD%BF%E7%94%A8%20%22module%22%3A%20%22esnext%22%20%E9%80%89%E9%A1%B9%EF%BC%9ATypeScript%20%E4%BF%9D%E7%95%99%20import()%20%E8%AF%AD%E5%8F%A5%EF%BC%8C%E8%AF%A5%E8%AF%AD%E5%8F%A5%E7%94%A8%E4%BA%8E%20Webpack%20Code%20Splitting%E3%80%82</center></body></html>